<template>
  <div class="container">
    <!--    <Search></Search>-->
    <HomeNav></HomeNav>
    <!-- 商品显示区域 -->
    <div class="content">
      <!-- 秒杀 -->
      <div class="seckill">
        <!-- 头部 -->
        <div class="seckill-head">
          <div class="seckill-icon">
            <img src="static/img/index/clock.png">
          </div>
          <div class="seckill-text">
            <span class="seckill-title">限时抢购</span>
          </div>
          <div class="count-down">
            <span class="count-down-text">当前场次</span>
            <span class="count-down-num count-down-hour">{{ seckillsHours }}</span>
            <span class="count-down-point">:</span>
            <span class="count-down-num count-down-minute">{{ seckillsMinutes }}</span>
            <span class="count-down-point">:</span>
            <span class="count-down-num count-down-seconds">{{ seckillsSeconds }}</span>
            <span class="count-down-text">后结束抢购</span>
          </div>
        </div>
        <!-- 内容 -->
        <div class="seckill-content">
          <div class="seckill-item" v-for="(item, index) in seckills.goodsList" :key="index">
            <div class="seckill-item-img">
              <div v-on:click="addThisToCart(user.userId, item.goodsId)"><img :src="item.img" alt="img"/></div>
            </div>
            <div class="seckill-item-info">
              <p>【{{ item.title }}】</p>
              <p>{{ item.description }}</p>
              <p class="seckill-price-wrapper">
                <span class="seckill-price text-danger"><Icon type="social-yen"></Icon>{{ item.price }}</span>
                <span class="seckill-old-price"><s>{{ item.realPrice }}</s></span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- 爱吃专场 -->
      <div class="item-class">
        <div class="item-class-head item-class-eat-head">
          <span class="item-class-title">一鸣爆款</span>
        </div>
        <div class="item-class-content" v-for="(item, index) in eat" :key="index">
          <div class="item-content-top">
            <div class="item-four-img">
              <div class="item-four-detail" v-for="(subItem, index) in item" :key="index">
                <div class="item-left-img ">
                  <div v-on:click="addThisToCart(user.userId, subItem.goodsId)" class="portfolio_item">
                    <img :src="subItem.img" alt="image" class="img-responsive"/>
                    <div class="portfolio_item_hover">
                      <div class="portfolio-border">
                        <div class="item_info">
                          <span>{{ subItem.title }}</span>
                          <em>加入购物车</em>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="item-left-text">
                  <p class="pt_bi_tit pt_bi_tit-eat">{{ subItem.title }}</p>
                  <p class="pt_bi_promo">{{ subItem.description }}</p>
                  <div class="goods-price-wrapper">
                    <span class="goods-price text-danger"><Icon type="social-yen"></Icon>{{ subItem.price }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import HomeNav from '@/components/nav/HomeNav';
import store from '@/vuex/store';
import request from '@/utils/request';
import {mapState, mapActions, mapGetters, mapMutations} from 'vuex';

export default {
  name: 'Index',
  created () {
    this.loadSeckillsInfo(this.storeId);
    this.loadSeckillsTime();
    this.loadCarouselItems();
    this.loadEat();
    this.getInfo();
  },
  mounted () {
    const father = this;
    this.setIntervalObj = setInterval(function () {
      father.REDUCE_SECKILLS_TIME();
    }, 1000);
  },
  data () {
    return {
      setIntervalObj: null
    };
  },
  methods: {
    ...mapActions(['loadSeckillsTime', 'loadSeckillsInfo', 'loadCarouselItems', 'loadEat', 'logout', 'getInfo']),
    ...mapMutations(['REDUCE_SECKILLS_TIME']),
    addThisToCart (userId, goodsId) {
      const num = 1;
      this.addToCart(userId, goodsId, num).then(value => { console.log(value); });
    },
    // 加入购物车
    addToCart (userId, goodsId, count) {
      return new Promise((resolve, reject) => {
        request({
          url: '/cart/addToCart',
          method: 'post',
          params: {
            storeId: this.storeId,
            userId: userId,
            goodsId: goodsId,
            count: count
          }
        }).then(() => { this.$message.success('添加成功'); });
      });
    }
  },
  computed: {
    ...mapState(['seckills', 'eat', 'user', 'token', 'storeId']),
    ...mapGetters(['seckillsHours', 'seckillsMinutes', 'seckillsSeconds', 'token', 'user'])
  },
  components: {
    HomeNav
  },
  destroyed () {
    clearInterval(this.setIntervalObj);
  },
  store
};
</script>

<style scoped>
.container {
  background-color: #ffffff;
  background-image: url("/static/img/index/background.png");
  background-repeat: repeat;
  padding-bottom: 100px;
}

.content {
  width: 1008px;
  margin: 0px auto;
}

/*****************************秒杀专栏开始*****************************/
/*秒杀专栏*/
.seckill {
  width: 100%;
  height: 360px;
  margin: 15px auto;
  background-color: #fff;
}

.seckill-head {
  width: 100%;
  height: 50px;
  background-color: #f5cb1a;
}

.seckill-icon {
  width: 68px;
  height: 100%;
  float: left;
}

.seckill-icon img {
  width: 35px;
  height: 35px;
  margin-top: 6px;
  margin-left: 15px;
  animation-name: shake-clock;
  animation-duration: 0.3s;
  animation-iteration-count: infinite; /*设置无线循环*/
}

/*定义闹钟震动动画关键帧*/
@keyframes shake-clock {
  0% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(-8deg);
  }
}

.seckill-text {
  width: 300px;
  height: 100%;
  float: left;
}

.seckill-text .seckill-title {
  font-size: 22px;
  line-height: 50px;
  color: #fff;
}

.seckill-text .seckill-remarks {
  margin-left: 5px;
  font-size: 10px;
  color: #fff;
}

/*倒计时*/
.count-down {
  height: 100%;
  margin-right: 30px;
  line-height: 50px;
  float: right;
}

.count-down-text {
  color: #fff;
}

.count-down-num {
  padding: 3px;
  border-radius: 5px;
  background-color: #440106;
  font-size: 26px;
  font-weight: bold;
  color: #f90013;
}

.count-down-point {
  font-size: 26px;
  font-weight: bold;
  color: #440106;
}

.seckill-content {
  width: 100%;
  height: 320px;
}

.seckill-item {
  width: 230px;
  height: 260px;
  margin-top: 15px;
  margin-left: 15px;
  box-shadow: 0px 0px 8px #ccc;
  cursor: pointer;
  float: left;
}

.seckill-item-img {
  width: 220px;
  margin: 0px auto;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}

.seckill-item-img img {
  height: 130px;
  margin-left: 15px;
  margin-top: 15px;
  transition: margin-top 0.3s;
}

.seckill-item-img:hover img {
  margin-top: 6px;
  transition: margin-top 0.3s;
}

.seckill-item-info {
  padding: 5px;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 12px;
  color: #009688;
}

.seckill-item-info i:first-child {
  font-size: 14px;
}

.seckill-price-wrapper{
  margin-left: 5px;
}

.seckill-price {
  margin-right: 5px;
  font-size: 25px;
  font-weight: bold;
}

.goods-price-wrapper {
  margin-top: 50px;
  margin-right: 40px;
  float: right;
}

.goods-price {
  margin-right: 5px;
  font-size: 25px;
  font-weight: bold;
  color: rgb(0, 150, 136);
}

/*****************************秒杀专栏结束*****************************/

/*****************************商品专栏开始*****************************/
.item-class {
  width: 100%;
  height: 1200px;
  margin-top: 15px;
}

.item-class-head {
  width: 100%;
  height: 50px;
  background-color: #4488a7;
}

.item-class-eat-head {
  background-color: #f5cb1a;
}

.item-class-head ul {
  list-style: none;
  float: right;
  margin-right: 30px;
  line-height: 50px;
}

.item-class-head a {
  padding: 6px;
  margin-left: 15px;
  font-size: 12px;
  background-color: #6da6be;
  border: 1px solid #6da6be;
  text-decoration: none;
  color: #fff;
}

.item-class-eat-head a {
  background-color: #eeb955;
  border: 1px solid #eeb955;
}

.item-class-head a:hover {
  border: 1px solid #fff;
}

.item-class-head li {
  float: left;
}

.item-class-title {
  font-size: 25px;
  line-height: 50px;
  color: #fff;
  margin-left: 15px;
}

.item-class-content {
  width: 49%;
  cursor: pointer;
  margin-left: 0.9%;
  /*background-color: #cff;*/
  float: left;

}

.item-class-content:nth-child(odd) {
  border: none;
}

.item-content-top {
  width: 100%;
  height: 1200px;
}

.item-four-img {
  width: 100%;
  margin-left: 8px;
  float: left;
}

.item-four-detail img {
  margin-left: 0px;
  transition: margin-left 0.3s;
}

.item-four-detail:hover img {
  margin-left: -6px;
  transition: margin-left 0.3s;
}

.item-four-detail {
  width: 100%;
  height: 300px;
  margin-left: -1px;
  float: left;
}

.item-left-text {
  margin-left: 5px;
  margin-top: 25px;
  width: 180px;
  float: right;
}

.item-left-img {
  width: 300px;
  margin-top: 15px;
  overflow: hidden;
  float: left;
  display: block;
}

.item-left-img img {
  margin-left: 5px;
  width: 300px;
}

.pt_bi_tit {
  font-weight: bold;
  font-family: 黑体;
  font-size: 26px;
  color: #4488a7;
}

.pt_bi_tit-eat {
  color: #ecb127;
}

.pt_bi_promo {
  color: #00695c;
  font-weight: bold;
  font-family: 华文仿宋;
  font-size: 16px;
}

.item-content-bottom {
  width: 100%;
  margin-top: 8px;
}

.item-content-bottom-img {
  width: 156px;
  margin-right: 8px;
  overflow: hidden;
  float: left;
}

.item-content-bottom-img img {
  margin-left: 0px;
  transition: margin-left 0.3s;
}

.item-content-bottom-img:hover img {
  margin-left: -15px;
  transition: margin-left 0.3s;
}

/* portfolio section
==================================================*/

.portfolio .categories-grid span {
  font-size: 30px;
  margin-bottom: 30px;
  display: inline-block;
}

.portfolio .categories-grid .categories ul li {
  list-style: none;
  margin: 20px 0;
}

.portfolio .categories-grid .categories ul li a {
  display: inline-block;
  color: #60606e;
  padding: 0 10px;
  margin: 0 10px;
  -webkit-transition: all .2s ease-in-out .2s;
  transition: all .2s ease-in-out .2s;
}

.portfolio .categories-grid .categories ul li a:hover,
.portfolio .categories-grid .categories ul li a:focus {
  text-decoration: none;
}

.portfolio .categories-grid .categories ul li a.active {
  margin-left: 0;
  background-color: #ffbf00;
  padding: 0px 20px;
  color: white;
  border-radius: 25px;
  text-decoration: none;
}

.portfolio_filter {
  padding-left: 0;
}

.portfolio_item {
  position: relative;
  overflow: hidden;
  display: block;
}

.portfolio_item .portfolio_item_hover {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, .8);
  -webkit-transform: translate(-100%);
  transform: translate(-100%);
  opacity: 0;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.portfolio_item .portfolio_item_hover .item_info {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 10px;
  width: 100%;
  font-weight: bold;
}

.portfolio_item .portfolio_item_hover .item_info span {
  display: block;
  color: #fff;
  font-size: 26px;
  -webkit-transform: translateX(-100px);
  transform: translateX(-100px);
  -webkit-transition: all .2s ease-in-out .2s;
  transition: all .2s ease-in-out .2s;
  opacity: 0;
}

.portfolio_item .portfolio_item_hover .item_info em {
  font-style: normal;
  display: inline-block;
  background-color: #ffbf00;
  padding: 10px 50px;
  border-radius: 20px;
  color: #333;
  margin-top: 10px;
  -webkit-transform: translateX(-100px);
  transform: translateX(-100px);
  -webkit-transition: all .3s ease-in-out .3s;
  transition: all .3s ease-in-out .3s;
  opacity: 0;
  font-size: 16px;
  letter-spacing: 2px;
}

.portfolio_item:hover .portfolio_item_hover {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.portfolio_item:hover .item_info em,
.portfolio_item:hover .item_info span {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.portfolio .categories-grid .categories ul li {
  float: left;
}

.portfolio .categories-grid .categories ul li a {
  padding: 0 10px;
  -webkit-transition: all .2s ease-in-out .2s;
  transition: all .2s ease-in-out .2s;
}

.portfolio_filter {
  padding-left: 0;
  display: inline-block;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 50px;
}

.portfolio-inner {
  padding-bottom: 0 !important;
  padding-top: 55px;
}

/*****************************商品专栏结束*****************************/
</style>
